<template>
  <div class="tab3_tab4">
    <!-- <h3 style="margin-top: 0.2rem;"><i class="fa fa-tags"></i>&nbsp;结果展示</h3> -->
    <el-divider style="margin-top: 0.3rem;" content-position="left">参数设置</el-divider>
    <div class="radioList">
      <span>工序选择：</span>
      <el-select v-model="value1" placeholder="请选择" @change="changeParam">
        <el-option
          v-for="item in options1"
          :key="Math.random() + 'ha'"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span>参数选择：</span>
      <el-select v-model="value2" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="Math.random() + '_ji'"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="radioList">
      <span>是否包含联动质检：</span>
      <el-radio-group v-model="isliandongzhijian">
        <el-radio label="是"></el-radio>
        <el-radio label="否"></el-radio>
      </el-radio-group>
      <br><el-button type="primary" size="medium" style="margin: 0.2rem 0 0 0.3rem;" @click="sureGX">确定</el-button>
    </div>
    <el-divider style="margin-top: 0.3rem;" content-position="left">结果展示</el-divider>
    <!-- 如果参数选择选择无的时候，结果显示 当前工序的关键参数为  【两个参数名的列表】 所有参数：
      公共参数：
    （两个框）
    下面的表格图等等都不要了-->
    <div v-show="!showall">
      <div class="shadowdiv">
        <h4>所有参数：</h4>
      </div>
      <div class="shadowdiv">
        <h4>公共参数：</h4>
      </div>
    </div>
    

    <div v-show="showall">
      <div class="tablezuhe" id="liandongtable">
        <h3 style="margin: 0.4rem 0;"><i class="fa fa-share-alt-square"></i>&nbsp;<span>{{firstTit}}</span></h3>
        <data-tables :tableTitle="tableThead" :tableData="tableBody" :height="'5rem'" style="padding: 0 0.27rem;"></data-tables>
      </div>
      <div class="tab3chart" v-show="thisSure === 3">
        <h3 style="margin: 0.4rem 0;"><i class="fa fa-share-alt-square"></i>&nbsp;条形图</h3>
        <div class="chart3-1">
          <!-- <e-charts :optionsData="barData"></e-charts> -->
          <img :src="barImg" alt=""><!-- 柱状图改成图片 2019-12-10 -->
        </div>
        <h3 style="margin: 0.4rem 0;"><i class="fa fa-share-alt-square"></i>&nbsp;散点图</h3>
        <div class="chart3-2">
          <!-- <e-charts :optionsData="scatterData"></e-charts> -->
          <img :src="scatterData2" alt="">
        </div>
      </div>
      <div class="tab4chart" v-show="thisSure === 4">
        <h3 style="margin: 0.4rem 0;"><i class="fa fa-share-alt-square"></i>&nbsp;热力图</h3>
        <e-charts :optionsData="heatMapData"></e-charts>
        <!-- <e-charts :optionsData="scatterData2"></e-charts> -->
        <h3 style="margin: 0.4rem 0;"><i class="fa fa-share-alt-square"></i>&nbsp;散点图</h3>
        <img :src="scatterData2" alt="">
      </div>
      <!-- <h3 style="margin-top: 0.2rem;"><i class="fa fa-tags"></i>&nbsp;结论</h3> -->
      <el-divider style="margin-top: 0.3rem;" content-position="left">结论</el-divider>
      <div class="resultShow">
        <span>{{ resultName }}：</span>
        <el-button type="text" v-for="item of keyParam" :key="item.id">（{{ item.name }}）</el-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import dataTables from './table.vue'
import eCharts from './chart.vue'
export default {
  name: 'tab3_tab4',
  props: {
    radioList: {
      type: Array,
      default: () => []
    },
    tableThead: {
      type: Array,
      default: () => []
    },
    tableBody: {
      type: Array,
      default: () => []
    },
    resultName: {
      type: String,
      default: () => ''
    },
    idx: {
      type: Number,
      default: () => 1
    },
    keyParam: {
      type: Array,
      default: () => []
    },
    scatterData: {
      type: Object,
      default: () => {}
    },
    scatterData2: {
      type: String,
      default: () => ''
    },
    barImg: {
      type: String,
      default: () => ''
    },
    barData: {
      type: Object,
      default: () => {}
    },
    heatMapData: {
      type: Object,
      default: () => {}
    },
    firstTit: {
      type: String,
      default: () => ''
    },
    isliandongzhijian: {
      type: String,
      default: () => ''
    },
    options1:{
      type: Array,
      default: () => []
    }
  },
  components: {
    dataTables,
    eCharts
  },
  data () {
    return {
      showall:true,
      // firstTit: 'SHAP Value',
      paramRadio: 1,
      nowIdx: 1,
      thisSure: 1,
      // options1: [{
      //   value: '1',
      //   label: '工序1'
      // }, {
      //   value: '2',
      //   label: '工序2'
      // }, {
      //   value: '3',
      //   label: '工序3'
      // }, {
      //   value: '4',
      //   label: '工序4'
      // }, {
      //   value: '5',
      //   label: '工序5'
      // }, {
      //   value: '6',
      //   label: '工序终检'
      // }],
      value1: '',
      options2: [],
      value2: '',
      option_1: [
        {label: '无', value: ''},
        {label: '搅拌速度', value: '0'},
        {label: 'x_注射压力', id: '1'},
        {label: 'x_保压时间', id: '2'},
        {label: 'x_模板预热温度', id: '3'},
        {label: '浆料缸温度', id: '4'},
        {label: 'x_合模压力', id: '5'},
        {label: 'x_烧结温度', id: '6'},
        {label: 'x_保温时间', id: '7'},
        {label: 'x_升温速度', id: '8'},
        {label: 'x_降温速度', id: '9'},
        {label: '高温强化时间', id: '10'},
        {label: '室温强化时间', id: '11'}
      ],
      option_2: [
        {label: '无', value: ''},
        {label: '收缩率', id: '0'},
        {label: '软化点', id: '1'},
        {label: '变形率', id: '2'},
        {label: '表面强度', id: '3'},
        {label: '灰分', id: '4'},
        {label: 'l_粘度', id: '5'},
        {label: '化学质量', id: '6'},
        {label: 'l_注射压力', id: '7'},
        {label: 'l_保压时间', id: '8'},
        {label: 'l_模板预热温度', id: '9'},
        {label: '蜡膏温度', id: '10'},
        {label: 'l_环境温度', id: '11'},
        {label: 'l_合模压力', id: '12'}
      ],
      option_3: [
        {label: '无', value: ''},
        {label: '热膨胀性', id: '0'},
        {label: '化学成分', id: '1'},
        {label: '粒度', id: '2'},
        {label: 't_粘度', id: '3'},
        {label: 't_环境温度', id: '4'},
        {label: '模壳湿度/环境湿度', id: '5'},
        {label: '模壳厚度', id: '6'},
        {label: '升压速度', id: '7'},
        {label: '脱蜡压力', id: '8'},
        {label: '脱蜡温度', id: '9'},
        {label: 't_焙烧温度', id: '10'},
        {label: 't_保温时间', id: '11'},
        {label: 't_升温速度', id: '12'},
        {label: 't_降温速度', id: '13'}
      ],
      option_4: [
        {label: '无', value: ''},
        {label: '合金成分', value: '0'},
        {label: '耐火材料成分', value: '1'},
        {label: '蜡料成分', value: '2'},
        {label: '精炼温度', value: '3'},
        {label: '精炼时间', value: '4'},
        {label: 'r_真空度', value: '5'},
        {label: '浇注温度', value: '6'},
        {label: '过滤器', value: '7'},
        {label: '浇注速度', value: '8'},
        {label: '拉晶速度', value: '9'},
        {label: '温度梯度', value: '10'},
        {label: '模组加热温度', value: '11'},
        {label: '模组升温速度', value: '12'},
        {label: '金属液静置时间', value: '13'},
        {label: '冷却时间', value: '14'}
      ],
      option_5: [
        {label: '无', value: ''},
        {label: '手工清壳/水力清壳', value: '0'},
        {label: '线切割/砂轮切割', value: '1'},
        {label: '脱芯液成分', value: '2'},
        {label: '脱芯温度', value: '3'},
        {label: '脱芯压力', value: '4'},
        {label: '脱芯时间', value: '5'},
        {label: '打磨时长', value: '6'}
      ],
      // isliandongzhijian: '是',//是否包含联动质检：
    }
  },
  watch: {
    idx (newval, oldval) {
      this.nowIdx = newval
      this.thisSure = 1
    }
  },
  methods: {
    sureGX () {
      this.thisSure = this.nowIdx
      this.$emit('gxResult', this.value1, this.value2)
    },
    changeParam () {
      // this.$api.operation({
      //   step: this.value1
      // }).then(res => {
      this.$api.get_multi_args({
        rule: this.value1
      }).then(res => {
        // console.log(res)
        if(JSON.parse(res).msg != 'success'){
          this.$alert(JSON.parse(res).msg, '提示')
        }else {
          var data = JSON.parse(res).data
          this.options2 = [{
            label:'无',
            value:'无'
          }]
          this.value2 = ''
          for(var i=0;i<data.length;i++){
            this.options2.push({
              label:data[i],
              value:data[i]
            })
          }
          // this.options2 = res.data
        }
      })
      // var n = 'option_' + this.value1
      // this.options2 = this[n]
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.shadowdiv {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  margin-top: .1rem;
  padding:.1rem;
}
.tab3_tab4 {
  >>> .el-divider__text {
    font-size: 0.22rem;
  }
  >>> .el-divider {
    background-color: #9c9d9e;
  }
  .tablezuhe
  >>> tbody {
    tr {
      td:first-child {
        background-color: #eaeaea;
        font-weight: 700;
        color: #333;
        font-size: 18px;
      }
    }
  }
  >>> .pagination-wrap {
    display: none!important;
  }
  h3 {
    font-size: 0.18rem;
    font-weight: 800;
  }
  .radioList {
    margin: 0.4rem 0;
    span {
      display: inline-block;
      margin-left: 0.35rem;
    }
  }
  .tab3chart, .tab4chart {
    // display: none;
    img {
      width: 11.6rem;
      height: 6.6rem;
    }
  }
  .resultShow {
    padding: 0.1rem 0.3rem;
    span {
      font-weight: 700;
    }
  }
}

</style>
